<template>
	<view class="com-float-button"
		:style="{ top: parseInt(top) + 'px', left: parseInt(left) + 'px' }"
		@touchmove.stop.prevent="stop"
		@touchstart.capture="touchstart"
		@touchend.capture="touchend"
		@touchmove.capture="touchmove"
		v-if="list.length > 0">
		<view :class="{ mark: show }" @click="show = false"></view>
		<view :class="show ? 'list-active' : 'list'">
			<view
				class="list-item"
				:class="{ show: show }"
				:style="{ width: parseInt(size) + 'rpx', height: parseInt(size) + 'rpx', background: item.background ? item.background : background }"
				v-for="(item, index) in list"
				:key="index"
				@click="onClick(item)"
			>
				<view v-if="!item.svg" class="icon-png-wrap">
					<image class="icon" :src="item.url" mode="aspectFit"></image>
					<text class="name" :style="{ fontSize: parseInt(fontSize) + 'rpx' }">{{ item.name }}</text>
				</view>

				<view v-if="item.svg" class="icon-wrap">
					<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M518.4 59.2c-147.2 0-267.2 120-267.2 267.2s120 267.2 267.2 267.2 267.2-120 267.2-267.2S665.6 59.2 518.4 59.2z m0 486.4c-120 0-219.2-97.6-219.2-219.2 0-120 97.6-219.2 219.2-219.2 120 0 219.2 97.6 219.2 219.2S640 545.6 518.4 545.6zM750.4 564.8c-11.2-6.4-25.6-3.2-33.6 8-6.4 11.2-3.2 25.6 8 33.6 115.2 73.6 184 198.4 184 336 0 12.8 11.2 24 24 24s24-11.2 24-24c1.6-155.2-76.8-296-206.4-377.6zM273.6 564.8C144 646.4 67.2 787.2 67.2 940.8c0 12.8 11.2 24 24 24s24-11.2 24-24c0-136 68.8-262.4 184-336 11.2-6.4 14.4-22.4 8-33.6-8-9.6-22.4-12.8-33.6-6.4z"/></svg>
				</view>
				<view v-if="item.svg" class="icon-wrap">
					<text class="name" :style="{ fontSize: parseInt(fontSize) + 'rpx' }">{{ item.name }}</text>
				</view>
			</view>
		</view>
		<view
			class="list-item show no-mb"
			:style="{ width: parseInt(size) + 'rpx', height: parseInt(size) + 'rpx', background: background }"
			@click="show = !show"
		>
			<image class="icon" :src="show ? closeIcon : openIcon" mode="aspectFit"></image>
			<text class="name" :style="{ fontSize: parseInt(fontSize) + 'rpx' }">{{ show ? closeText : openText }}</text>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		list: {
			type: Array,
			default: () => []
		},
		// 离屏幕底部距离
		bottom: {
			type: [String, Number],
			default: '350rpx'
		},
		// 图标大小，即按钮宽高rpx
		size: {
			type: [String, Number],
			default: '85rpx'
		},
		fontSize: {
			type: [String, Number],
			default: '20rpx'
		},
		background: {
			type: String,
			default: 'rgba(153, 153, 153, 0.7)'
		},
		openText: {
			type: String,
			default: '更多'
		},
		closeText: {
			type: String,
			default: '返回'
		},
		openIcon: {
			type: String,
			default: '../../static/images/com-float-buitton/openIcon.png'
		},
		closeIcon: {
			type: String,
			default: '../../static/images/com-float-buitton/closeIcon.png'
		}
	},
	data() {
		return {
			show: false,
			
			// drag
			left: '280',
			top: '500',
			isdrag: false,
			NowLeft: '',
			disX: '',
			NowTop: '',
			disY: '',
		};
	},
	methods: {
		onClick(item) {
			this.$emit('click', item);
			this.show = false;
		},
		stop() {
			return false;
		},
		
		touchstart(e) {
			let that = this;
			this.isdrag = true;
			this.NowLeft = parseInt(that.left);
			this.NowTop = parseInt(that.top);
			this.disX = e.touches[0].pageX;
			this.disY = e.touches[0].pageY;
			return false;
		},
		touchend(e) {
			this.isdrag = false;
		},
		touchmove(e) {
			if (this.isdrag) {
				this.left = this.NowLeft + e.touches[0].pageX - this.disX;
				this.top = this.NowTop + e.touches[0].pageY - this.disY;
				return false;
			}
		},
	}
};
</script>

<style lang="scss" scoped>
.com-float-button {
	position: fixed;
	right: 20rpx;
	z-index: 999;
	.mark {
		z-index: -1;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.38);
		transition: all 0.3s linear;
	}
	.list-active {
		position: absolute;
		bottom: 80rpx;
		left: 0;
		transform: scale(1);
		transition: all 0.3s ease-in-out;
	}
	.list {
		position: absolute;
		bottom: 0;
		left: 0;
		transform: scale(0);
		transform-origin: bottom;
		opacity: 0;
		transition: all 0.3s ease-in-out;
	}
	.list-item {
		margin-bottom: 20rpx;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		.iconfont {
			line-height: 1;
			font-size: 45rpx;
		}
		&.no-mb {
			margin-bottom: 0;
		}
		.icon {
			height: 48rpx;
		}
		.name {
			line-height: 1;
			margin-top: 8rpx;
		}
		.icon-png-wrap {
			text-align: center;
			
			.icon {
				margin-top: 6px;
			}
		}
		
		.icon-wrap {
			padding-top: 4rpx;
			fill: white;
			line-height: 18rpx;
		}
	}
}
</style>
